import React, { PureComponent } from 'react'
import { Chart } from '@antv/g2'

import PropTypes from 'prop-types'

import Style from './chart.css'

class chart extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
  }

  renderChar () {
    const { color, data } = this.props
    this.chart.data(data)
    this.chart.scale({
      count: {
        min: 10000,
        nice: true
      },
      currentDate: {
        range: [0.05, 0.95]
      }
    })
    this.chart.tooltip({
      showCrosshairs: true,
      shared: true
    })

    this.chart.axis('count', {
      label: {
        offset: -2,
        formatter: (val) => {
          return val
          // return (+val / 1000).toFixed(1) + 'k'
        }
      }
    })

    this.chart.area().position('currentDate*count').color(color)
    this.chart.line().position('currentDate*count').color(color)

    this.chart.theme({
      defaultColor: '#19ADF9'
    })

    setTimeout(() => {
      this.chart.render()
    }, 50)
  }

  componentDidMount () {
    const { unkey } = this.props
    this.chart = new Chart({
      container: unkey,
      autoFit: true,
      height: 230
    })
    this.renderChar()
  }

  componentWillReceiveProps (nextProps) {
    const { data } = nextProps
    this.chart.data(data)
    setTimeout(() => {
      this.chart.render()
    }, 50)
  }

  render () {
    return (
      <div className={Style['chart-container']}>
        <div id={this.props.unkey} />
      </div>
    )
  }
}

chart.propTypes = {
  data: PropTypes.any,
  unkey: PropTypes.any,
  color: PropTypes.string
}
export default chart
